<template>
  <div id="member_blance">
    <div class="content-blance">
      <div class="header-blan">
        <div class="title"> {{ $t('member.blance.blance.totalAccountAssets') }}( {{ $t('commons.symbol') }})</div>
        <div class="header-row">
          <div class="left">
            <h1>{{walletObj.balance_total || 0.0000}}</h1> <span>≈ {{walletObj.balance_to_cny || 0.0000}} CNY</span>
          </div>
          <div class="left">
            <el-button size="medium" round @click="$router.push({path: 'recharge'})"> {{ $t('member.blance.blance.recharge') }}</el-button>
            <el-button size="medium" round @click="$router.push({path: 'withdraw',query:{type: 1}})"> {{ $t('member.blance.blance.withdrawal') }}</el-button>
            <el-button size="medium" round @click="$router.push({path: 'withdraw',query:{type: 2}})"> {{ $t('member.blance.blance.transfer') }}</el-button>
          </div>
        </div>
      </div>
      <div class="blance-table" v-loading="loading">
        <el-table
          :data="walletArr"
          style="width: 100%">
          <el-table-column
            style="padding-left: 25px;"
            :label="$t('member.blance.blance.currency') "
            width="120">
            <template slot-scope="scope">
              <span>{{scope.row.name}}</span>
            </template>

          </el-table-column>
          <el-table-column
            :label="$t('member.blance.blance.available') "
            >
            <template slot-scope="scope">
              <span>{{scope.row.balance || 0.0000}}</span>
            </template>
          </el-table-column>
          <el-table-column
            :label="$t('member.blance.blance.freeze') ">
            <template slot-scope="scope">
              <span>{{scope.row.balance_freeze || 0.0000}}</span>
            </template>
          </el-table-column>
          <el-table-column
            :label="$t('member.blance.blance.totalAssets') ">
            <template slot-scope="scope">
              <span>{{scope.row.balance_total || 0.0000}}</span>
            </template>
          </el-table-column>
          <el-table-column
            :label="$t('member.blance.blance.valuation') +'(CNY)'">
            <template slot-scope="scope">
              <span>{{scope.row.balance_to_cny || 0.0000}}</span>
            </template>
          </el-table-column>
          <el-table-column style="padding-right: 25px;" align="right" width="290" :label="$t('member.blance.blance.operating') ">
            <template slot-scope="scope">
              <el-button type="text" @click="$router.push({path: 'recharge',query: {cid: scope.row.money_type}})"> {{ $t('member.blance.blance.recharge') }}</el-button>
              <el-button type="text" @click="$router.push({path: 'withdraw',query: {cid: scope.row.money_type,type: 1}})"> {{ $t('member.blance.blance.withdrawal') }}</el-button>
              <el-button type="text" @click="$router.push({path: 'withdraw',query: {cid: scope.row.money_type,type: 2}})"> {{ $t('member.blance.blance.transfer') }}</el-button>
              <el-button type="text" @click="$router.push({path: 'record',query: {cid: scope.row.money_type}})"> {{ $t('member.blance.blance.viewFlow') }}</el-button>
            </template>
          </el-table-column>
        </el-table>
      </div>


    </div>
  </div>
</template>

<script>
import { walletFn } from '@/api/member/blance'
export default {
  data() {
    return {
      walletArr: [],
      memberInfo: {},
      walletObj:{},
      loading: true,
    };
  },
  computed: {
    showType: function (){
      return this.$route.query.type;
    }
  },
  created() {
    this.getWallet();
  },
  mounted() {

  },
  methods: {
    getWallet(){
      walletFn().then(res => {
        if(res.code == 0){
          this.walletObj = res.data;
          this.walletArr = this.walletObj.wallet;
        }
        this.loading = false
      }).catch(err => {
        this.loading = false
					this.$message.error(err.message);
				});
    },
  }
};
</script>

<style lang="scss">
  #member_blance {
    .blance-table {
      th:first-child,td:first-child {
        padding-left: 20px;
      }
      th:nth-child(6),td:nth-child(6) {
        padding-right: 20px;
      }
    }
  }
</style>

<style scoped lang="scss">
  .content-blance {
    .header-blan {
      width: 100%;
      background: #fff;
      padding: 37px 20px 31px;
      box-sizing: border-box;
      margin-bottom: 15px;
      .title {
        font-size: 14px;
        font-weight: 600;
        color: #303133;
        margin-bottom: 13px;
      }
      .header-row {
        display: flex;
        align-items: center;
        justify-content: space-between;
        .left {
          display: flex;
          align-items: center;
          h1 {
            font-size: 32px;font-weight: 600;
            color: #303133;
            line-height: 45px;
            margin-right: 8px;
          }
          span {
            font-size: 16px;
            color: #868686;
            line-height: 22px;
          }
          .el-button {
            width: 95px;
            height: 34px;
            border-radius: 17px;
            border: 1px solid #FF547B;
            color: #FF547B;
          }
          .el-button:hover {
            background: #FF547B;
            color: #fff;
          }
        }
      }
    }
    .blance-table {
      width: 100%;
      background: #fff;
      min-height: 400px;
    }
  }
</style>
